/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: var(--sky-9);
  --ifm-color-primary-dark: var(--sky-10);
  --ifm-color-primary-darker: var(--sky-11);
  --ifm-color-primary-darkest: var(--sky-12);
  --ifm-color-primary-light: var(--sky-8);
  --ifm-color-primary-lighter: var(--sky-7);
  --ifm-color-primary-lightest: var(--sky-6);
  --ifm-footer-background-color: var(--sky-12);
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-button-font-weight: 500;
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    -0.1px 0.5px 0.6px hsl(var(--shadow-color) / 0.1),
    -0.2px 0.8px 0.9px -1.2px hsl(var(--shadow-color) / 0.1),
    -0.6px 2px 2.3px -2.5px hsl(var(--shadow-color) / 0.1);
  --shadow-elevation-medium:
    -0.1px 0.5px 0.6px hsl(var(--shadow-color) / 0.11),
    -0.5px 1.7px 2px -0.8px hsl(var(--shadow-color) / 0.11),
    -1.2px 4.2px 4.9px -1.7px hsl(var(--shadow-color) / 0.11),
    -3px 10.1px 11.9px -2.5px hsl(var(--shadow-color) / 0.11);
  --shadow-elevation-high:
    -0.1px 0.5px 0.6px hsl(var(--shadow-color) / 0.1),
    -0.9px 3px 3.5px -0.4px hsl(var(--shadow-color) / 0.1),
    -1.6px 5.5px 6.4px -0.7px hsl(var(--shadow-color) / 0.1),
    -2.6px 9.1px 10.6px -1.1px hsl(var(--shadow-color) / 0.1),
    -4.2px 14.5px 17px -1.4px hsl(var(--shadow-color) / 0.1),
    -6.6px 22.6px 26.5px -1.8px hsl(var(--shadow-color) / 0.1),
    -10px 34.4px 40.3px -2.1px hsl(var(--shadow-color) / 0.1),
    -14.8px 50.6px 59.3px -2.5px hsl(var(--shadow-color) / 0.1);
}

/* remove default theme max-width in examples content */
:root [class^='col docItemCol_'] {
  max-width: unset !important;
}

[data-theme='dark'] {
  --ifm-color-primary: var(--sky-9);
  --ifm-color-primary-dark: var(--sky-10);
  --ifm-color-primary-darker: var(--sky-11);
  --ifm-color-primary-darkest: var(--sky-12);
  --ifm-color-primary-light: var(--sky-6);
  --ifm-color-primary-lighter: var(--sky-4);
  --ifm-color-primary-lightest: var(--sky-2);
  --ifm-footer-background-color: var(--sky-12);
}

[data-theme='light'] .footer {
  background-image: linear-gradient(
    180deg,
    hsl(0deg 0% 100%) 0%,
    hsl(227deg 10% 98%) 40%,
    hsl(226deg 19% 97%) 58%,
    hsl(224deg 28% 96%) 69%,
    hsl(222deg 36% 95%) 77%,
    hsl(220deg 45% 94%) 83%,
    hsl(219deg 54% 93%) 89%,
    hsl(216deg 65% 93%) 93%,
    hsl(214deg 80% 93%) 97%,
    hsl(211deg 100% 93%) 100%
  );
  --ifm-footer-title-color: var(--ifm-color-black);
  --ifm-footer-link-color: var(--gray-12);
}

[data-theme='dark'] .footer {
  background-image: linear-gradient(
    180deg,
    hsl(0deg 0% 9%) 0%,
    hsl(227deg 10% 10%) 40%,
    hsl(226deg 19% 11%) 58%,
    hsl(224deg 28% 12%) 69%,
    hsl(222deg 36% 13%) 77%,
    hsl(220deg 45% 14%) 83%,
    hsl(219deg 54% 15%) 89%,
    hsl(216deg 65% 15%) 93%,
    hsl(214deg 80% 15%) 97%,
    hsl(211deg 100% 15%) 100%
  );
}

.navbar__title {
  text-transform: uppercase;
  font-weight: 300;
}

.button {
  box-shadow: var(--shadow-elevation-medium);
}
